<template>
    <div>
        <div class="font-bold text-lg">会员数据概览</div>
        <div class="flex gap-16pxpx">
            <div class="px-28px py-18px bg-white rounded-8px flex-1">
                <div class="flex mb-20px">
                    <div class="flex-1">
                        <div class="text-lightgray font-base">会员总数</div>
                        <div class="text-black text-31px">908</div>
                    </div>
                    <div class="flex-1">
                        <div class="text-lightgray font-base">昨日加入会员数</div>
                        <div class="text-black text-31px">3</div>
                    </div>
                </div>
                <div class="flex">
                    <div class="flex-1">
                        <div class="text-lightgray font-base">活跃会员</div>
                        <div class="flex items-center">
                            <div class="text-green text-31px mr-16px">56</div>
                            <div class="">
                                <div class="bg-green w-20px h-20px rounded-4px flex justify-center items-center">
                                    <el-icon color="#fff">
                                        <ArrowRight />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="text-lightgray font-base">潜力会员</div>
                        <div class="flex items-center">
                            <div class="text-primary text-31px mr-16px">56</div>
                            <div class="">
                                <div class="bg-primary w-20px h-20px rounded-4px flex justify-center items-center">
                                    <el-icon color="#fff">
                                        <ArrowRight />
                                    </el-icon>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            
            <div class="px-28px py-18px bg-white rounded-8px flex-1">
                <div class="flex mb-20px">
                    <div class="flex-1">
                        <div class="text-lightgray font-base">会员成交数</div>
                        <div class="text-black text-31px">28</div>
                    </div>
                    <div class="flex-1">
                        <div class="text-lightgray font-base"></div>
                        <div class="flex items-center">
                            <div class="text-lightgray mr-4px">较昨日</div>
                            <div class="px-6 py-2 rounded-4px bg-green bg-opacity-10 text-green">
                                +20
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex">
                    <div class="flex-1">
                        <div class="text-lightgray font-base">成交金额</div>
                        <div class="text-black text-31px">¥28</div>
                    </div>
                    <div class="flex-1">
                        <div class="text-lightgray font-base">潜力会员</div>
                        <div class="flex items-center">
                            <div class="text-primary text-31px mr-16px">56</div>
                            <div class="">
                                <div class="bg-primary w-20px h-20px rounded-4px flex justify-center items-center">
                                    <el-icon color="#fff">
                                        <ArrowRight />
                                    </el-icon>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>
<style lang="scss" scoped></style>
